<template>
	<view class="box bg-f7">
        <u-sticky>
            <view class="linear-box z-1 ">
                <view class="type-box align-items-center bg-white">
                    <!--<view class="align-items-center type-list fs-28 color-333">-->
                    <!--    <text>服务类型</text>-->
                    <!--    <u-icon name="arrow-down" color="#707070" size="12"></u-icon>-->
                    <!--</view>-->
                    <view class="align-items-center type-list fs-28 color-333" @click="sortType =1">
                        <text>服务状态</text>
                        <u-icon name="arrow-down" color="#707070" size="12"></u-icon>
                    </view>
                </view>
                <view class="sortType-box">
                    <view class="sortType-list bg-white padding-30" v-show="sortType ==1">
                        <view class="line"></view>
                        <view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center" @click="setSort(1)" :class="{'active':sortIndex==1}">
                            <text>待支付</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                        <view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center" @click="setSort(2)" :class="{'active':sortIndex==2}">
                            <text>待使用</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                        <view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center" @click="setSort(3)" :class="{'active':sortIndex==3}">
                            <text>已完成</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                        <view class="color-0 fs-26  margin-t-10 justifyContent-spaceBetween align-items-center" :class="{'active':sortIndex==0}" @click="setSort(0)">
                            <text>取消</text>
                            <image src="/static/image/shop/selected.png" mode="aspectFill"></image>
                        </view>
                    </view>
                </view>
            </view>
        </u-sticky>
		<view class="padding-30" v-if="list && list.length" >
			<view v-for="(item , index) in list" :key="index" class="bg-white border-radio-14 margin-b-20 padding-l-r-20" @click="goDetails(item)">
				<view class="title justifyContent-spaceBetween align-items-center">
					<view class="fs-30 fw-b color-0">{{item.service.title}}</view>
					<text class="fs-26 color-43" >{{getType(item.status)}}</text>
				</view>
				<view class="line"></view>
				<view class="fs-26 color-0 list">
					预约时间：{{item.yuyue_time}}
				</view>
				<view class="fs-26 color-0 list">
					被服务人：{{item.sick_json.name}}
				</view>
                <view class="fs-26 color-0 list">
                    服务费用：<text class="fw-b fs-26 color-0">￥{{item.order_amount_total }}</text>
                </view>
				<view class="flex-box padding-t-b-20">
					<view class="btn">查看详情</view>
					<view class="btn pay" @click.stop="pay(item)" v-if="item.status ==1">去付款</view>
				</view>
			</view>
		</view>
        <view v-else class="padding-30 ">
            <view class="padding-30 bg-white">
                <u-empty  mode="order"></u-empty>
            </view>

        </view>
	</view>
</template>

<script>
import {serviceOrder, servicePay } from '@/api/order'
	export default {
		data() {
			return {
				list:[
					{name:'XXX',status:1,time:'2025-05-12',type:'1'},
					{name:'XXX',status:2,time:'2025-05-12',type:'2'}
				],
                page:1,
                sortIndex:-1,
                isMore:true,
                status:'',
                sortType:0
			}
		},
        onLoad() {
            this.init()
        },
        //上拉加载函数
        onReachBottom(){
            if(this.isMore){
                setTimeout(()=>{
                    this.getList()
                },100)
            }else{
                uni.showToast({
                    title: '暂无更多',
                    icon: 'none'
                })
            }

        },
        onPullDownRefresh () {
            //刷新初始化数据
            this.init()
            //关闭刷新动画
            setTimeout(function () {
                uni.stopPullDownRefresh()
            }, 1000)
        },
		methods: {
            setSort(index){
                this.sortIndex =index
                this.init()
                this.sortType = -1
            },
			getType(type){
				let val = ''
				switch (Number(type)){
					case 0:
						val='取消'
						break;
                    case 1:
                        val='待支付'
                        break;
					case 2:
						val='待使用'
						break;
                    case 3:
                        val='已完成'
                        break;
					default:
						break;
				}
				return val
			},
            init(){
                console.log(515)
                this.page =1
                this.list = []
                this.getList()
            },
            getList(){
                console.log(1515)
                let params = {
                    page:this.page,
                    limit:10,
                    status:this.sortIndex > -1?this.sortIndex:''
                },arr = []
                serviceOrder(params).then(res=>{
                    if (res.code ==1){
                        res.data.map(item=>{
                            item.sick_json = JSON.parse(item.sick_json)
                            arr.push(item)
                        })
                        this.list = this.list.concat(arr )
                        if (res.data.length < 10){
                            this.isMore = false
                        }else {
                            this.isMore = true
                            this.page ++

                        }
                    }
                })
            },
            pay(item){
				let that =this
                uni.showModal({
                	confirmText:'支付',
					title:'提示',
					content:`确认支付${item.service.title}订单`,
					showCancel:true,
					success(e) {
						if(e.confirm){
							servicePay({order_no:item.order_no}).then(res=>{
								if(res.code == 1){
									uni.showToast({
										icon:'none',
										title:'支付成功',
									})
									that.init()
								}else{
									uni.showToast({
										icon:'none',
										title:res.msg,
									})
								}
							})
						}
					}
                })
               
            },
            goDetails(item){

                uni.navigateTo({
                    url:'/pageA/mine/serviceOrder/confirm?order_no='+item.order_no
                })
			}
		}
	}
</script>

<style lang="scss" scoped>
.title{
	height: 80rpx;
}
.list {
	padding: 10rpx 0;
}

.sortType-box {
    position: absolute;
    left: 0;
    top: 70rpx;
    width: 100%;
    .sortType-list {
        width: 100%;
        min-height: 200rpx;
        border-radius: 0  0  30rpx;
    }
    .align-items-center {
        height: 52rpx;
    }
    .active {
        image {
            display: block;
        }
    }
    image {
        display: none;
        width: 40rpx;
        height: 40rpx;
    }
}
.flex-box {
	justify-content: flex-end;
	.btn {
		width: 180rpx;
		height: 60rpx;
		margin-left: 20rpx;
		border-radius: 30px;
		border: 1px solid #DBDBDB;
		text-align: center;
		color: #4D4D4D;
		font-size: 26rpx;
		line-height: 60rpx;
		&.pay {
			color: #43ABC4;
			border: 1px solid #43ABC4;
			background: #EFFBFE;
		}
	}
}
.type-box {
	height: 80rpx;
	padding: 0 30rpx;
	.type-list {
		width: 266rpx;
	}
}
</style>
